<template>
  <el-row class="statistic-box">
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="2">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              大地图
              <el-tooltip effect="dark" content="系统收录游戏地图" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="161 + 3040">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              标点总数
              <el-tooltip effect="dark" content="地图上所有标点数目" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="153 + 69" title="已收录地区">
          <template #title>
            <div style="display: inline-flex; align-items: center">已收录地区</div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="0" title="已收录路线">
          <template #title>
            <div style="display: inline-flex; align-items: center">已收录路线</div>
          </template>
        </el-statistic>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>

</script>

<style scoped lang="less">
.statistic-box {
  border-bottom: 1px solid var(--el-border-color);
  margin: 0 20px;

  & .el-statistic {
    --el-statistic-content-font-size: 38px;
  }

  & .statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
  }

  & .statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
  }

  & .statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & .statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
  }
}
</style>
